<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" @closed="handleClosed">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" class="demo-ruleForm">
        <el-form-item label="主机名称" prop="engineName">
          <el-input v-model="form.engineName"></el-input>
        </el-form-item>
        <el-form-item label="主机地址" prop="engineAddress">
          <el-input v-model="form.engineAddress"></el-input>
        </el-form-item>
        <el-form-item label="端口号" prop="enginePort">
          <el-input v-model="form.enginePort"></el-input>
        </el-form-item>
        <el-form-item label="内存" prop="engineMemory">
          <el-input v-model="form.engineMemory"></el-input>
        </el-form-item>
        <el-form-item label="CPU" prop="engineCpu">
          <el-input v-model="form.engineCpu"></el-input>
        </el-form-item>
        <el-form-item label="磁盘" prop="engineDisk">
          <el-input v-model="form.engineDisk"></el-input>
        </el-form-item>
        <el-form-item label="主机类型" prop="engineType">
          <el-select v-model="form.engineType" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ENGINE_TYPE } from './data'
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'addOrEdit',
  props: ['mode', 'data'],
  data() {
    return {
      dialogVisible: true,
      title: this.mode === 1 ? '编辑主机' : '添加主机',
      form: {
        engineName: '',
        engineAddress: '',
        engineCpu: '',
        engineDisk: '',
        engineMemory: '',
        enginePort: '',
        engineType: ''
      },
      rules: {
        engineName: { required: true, message: '请输入主机名称' },
        engineAddress: { required: true, message: '请输入' },
        engineCpu: { required: true, message: '请输入端口号' },
        engineDisk: { required: true, message: '请输入内存' },
        engineMemory: { required: true, message: '请输入CPU' },
        enginePort: { required: true, message: '请输入磁盘' },
        engineType: { required: true, message: '请选择主机类型' }
      },
      options: ENGINE_TYPE
    }
  },
  created() {
    if (+this.mode) {
      this.form = { ...this.data }
    }
  },
  methods: {
    ...mapActions({
      postAddEngineInfo: 'POST_ADD_ENGINEINFO',
      putEngineInfoId: 'PUT_ENGINE_INFO_ID'
    }),
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.mode) {
            // 编辑
            this.putEngineInfoId({ ...this.form }).then((res) => {
              const { code } = res
              if (code === 100000) {
                this.$message.success('编辑成功')
                this.$emit('success', this.mode)
                this.dialogVisible = false
              } else {
                this.$message.warning('编辑失败~')
              }
            })
          } else {
            // 新增
            this.postAddEngineInfo({ ...this.form }).then((res) => {
              const { code } = res
              if (code === 100000) {
                this.$message.success('添加成功')
                this.$emit('success', this.mode)
                this.dialogVisible = false
              } else {
                this.$message.warning('添加失败~')
              }
            })
          }
        } else {
        }
      })
    },
    handleClosed() {
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss" scoped></style>
